<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>修改父组件数据</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}
		body {
			padding: 50px;
			box-sizing: border-box;
		}
		div {
		  cursor: pointer;
		  user-select: none;
		}

	</style>
</head>
<body>
	<div id="app" v-cloak>
		<cmp1 v-model="num1"></cmp1>
		<cmp2 :data1.sync="d1" :data2.sync="d2"></cmp2>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script>
		// 局部注册
		var cmp1 = {
			template: `
				<div @click="handleChange()">当前值：{{value}}</div>
			`,
			model: {
		        prop: 'value',
		        event: 'changeValue'
		    },
		    props: {
		        // 显示控制
		        value: {
		        	type: Number,
		            default: 0
		        },
		    },
			methods: {
				handleChange() {
		            this.$emit('changeValue', this.value+1); // 触发父组件的值变化事件
		        }
			}
		}

		var cmp2 = {
			template: `
				<div class="box">
					<h2>改变多个父组件数据</h2>
					<div @click="$emit('update:data1', data1+1)">数据1：{{data1}}</div>
					<div @click="$emit('update:data2', data2+1)">数据2：{{data2}}</div>
				</div>
			`,
			props: {
				data1: {
					type: Number,
		            default: 0
				},
				data2: {
					type: Number,
		            default: 0
				}
			}
		}

		var app = new Vue({
			el: '#app',
			// 局部注册组件
			components: {
				cmp1,
				cmp2,
			},
			data () {
				return {
					num1: 1,

					d1: 1,
					d2: 1,
				}
			},
		})

	</script>
</body>	
</html>